<template>
  <div class="div1">
    <!-- 通过 ref 属性绑定到一个名为 watermarkContainer 的引用 -->
    <div ref="watermarkContainer" class="div2"></div>
  </div>
</template>

<script lang="ts" setup>
// 导入 watermark 函数
import { getmark } from "@/hooks/useWaterMark";
import { onMounted, ref, reactive } from "vue";

// 调用 getmark 函数并解构赋值，获取 watermark 方法
const { watermark } = getmark();

// 创建一个 ref 对象，将在模板中的 div 元素上绑定，以便在组件挂载后访问该元素
const watermarkContainer = ref(null);

onMounted(() => {
  // 调用 watermark 方法，在 watermarkContainer 元素上添加水印
  watermark(
    reactive({
      waterStrText: "我是水印",
      containerRef: watermarkContainer.value,
    })
  );
});
</script>
<style lang="less" scoped>
.div1 {
  width: 500px;
  height: 500px;
  background-color: #fdcaca;
}
.div2 {
  width: 400px;
  height: 400px;
  background-color: #ff0707;
}
</style>
